<template>
	<div>
		<Card>
			<Row>
        <Col span="12">
					<label class="myLabel">创建选择：</label>
					<Cascader :data="data" v-model="selectValue" style="width: 200px;display: inline-block;"></Cascader>
					<div class="app-form">
						<label class="myLabel">配置内容：</label>
						<div class="myDiv">
							<Input v-model="yml" type="textarea" :rows="20" placeholder="请输入配置内容"/>
						</div>
					</div>
					<div style="text-align: right;">
						<Button type="primary" @click="creat">创建</Button>
					</div>
				</Col>
        <Col span="12" style="padding: 10px">
					<Button type="primary" @click="templateModal=true" v-show="tableShow==true" style="margin-bottom: 32px">创建模板</Button>
					<Table :columns="columns" :data="tableData" v-show="tableShow==true"></Table>
					<Modal v-model="templateModal" title="创建模板" @on-ok="creatTemplate" @on-cancel="cancel" width="1000" footer-hide>
						<div class="app-form">
							<label class="myLabel">应用名称：</label>
							<div class="myDiv" style="width: 200px">
								<Input v-model="appName" placeholder="请输入应用名称"/>
							</div>
						</div>
						<div class="app-form">
							<label class="myLabel">应用类型：</label>
							<div class="myDiv" style="width: 200px">
								<Select v-model="type">
									<Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
								</Select>
							</div>
						</div>
						<div class="app-form">
							<label class="myLabel">配置明细：</label>
							<div class="myDiv">
								<Input v-model="templateText" type="textarea" :rows="20" placeholder="Enter something..."/>
							</div>
						</div>
						<Button type="primary" @click="creatTemplate" v-if="btnShow==false" style="float: right;">创建</Button>
						<Button type="primary" @click="editTemplate" v-if="btnShow==true" style="float: right;">修改</Button>
					</Modal>
					<Modal v-model="deleteModal" title="删除模板" @on-ok="deleteTemplate" @on-cancel="cancel" :width="1000">
						<div>是否删除该项?</div>
					</Modal>
					<div class="center" v-show="tableShow==true">
						<div class="pageBox">
							<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
						</div>
					</div>
					<Button type="primary" @click="tableShow=true" v-show="tableShow==false" style="margin-bottom: 32px">返回列表</Button>
					<Input v-model="template" type="textarea" :rows="20" placeholder="Enter something..." v-show="tableShow==false"/>
				</Col>
			</Row>
		</Card>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				// 文本域
				yml: '',
				data: [
					{
						value: '持久化存储',
						label: '持久化存储',
						children: [
							{
								value: 'StorageClass',
								label: '存储类'
							},
							{
								value: 'PersistentVolumeClaim',
								label: '持久化存储卷声明'
							},
							{
								value: 'PersistentVolume',
								label: '持久化存储卷'
							}
						]
					},
					{
						value: '应用部署',
						label: '应用部署',
						children: [
							{
								value: 'Deployment',
								label: '部署'
							},
							// {
							// 	value: 'ReplicationController',
							// 	label: '副本控制器'
							// },
							{
								value: 'Service',
								label: '服务'
							},
							{
								value: 'Pod',
								label: '容器'
							},
							{
								value: 'ServiceAccount',
								label: '服务账户'
							}
						]
					},
					{
						value: '角色',
						label: '角色',
						children: [
							{
								value: 'ClusterRole',
								label: '集群管理员'
							},
							{
								value: 'ClusterRoleBinding',
								label: '集群角色绑定'
							},
							{
								value: 'Role',
								label: '应用角色'
							},
							{
								value: 'RoleBinding',
								label: '应用角色绑定'
							}
						]
					},
					{
						value: '水平伸缩器',
						label: '水平伸缩器',
						children: []
					}
				],
				selectValue: [],
				columns: [
					{
						title: '应用名称',
						key: 'appName'
					},
					{
						title: '应用类型',
						key: 'appType'
					},
					{
						title: '创建时间',
						key: 'createTime'
					},
					{
						title: '模板明细',
						key: 'yamltext',
						ellipsis: true,
						style: {
							height: '25px'
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										margin: '5px'
									},
									on: {
										click: () => {
											let my = params.row
											this.template = my.yamltext
											this.tableShow = false
										}
									}
								}, '查看详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										margin: '5px'
									},
									on: {
										click: () => {
											this.templateModal = true
											this.btnShow = true
											let myData = params.row
											this.appName = myData.appName
											this.type = myData.appType
											this.templateText = myData.yamltext
											this.editId = myData.uuid
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										margin: '5px'
									},
									on: {
										click: () => {
											this.deleteModal = true
											this.deleteUid = params.row.uuid
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				template: '',
				tableShow: true,
				count: 0,
				page: 1,
				pageSize: 5,
				templateModal: false,
				appName: '',
				type: '',
				typeList: [
					{
						value: 'StorageClass',
						label: '存储类'
					},
					{
						value: 'PersistentVolumeClaim',
						label: '持久化存储卷声明'
					},
					{
						value: 'PersistentVolume',
						label: '持久化存储卷'
					},
					{
						value: 'Deployment',
						label: '部署'
					},
					// {
					// 	value: 'ReplicationController',
					// 	label: '副本控制器'
					// },
					{
						value: 'Service',
						label: '服务'
					},
					{
						value: 'Pod',
						label: '容器'
					},
					{
						value: 'ServiceAccount',
						label: '服务账户'
					},
					{
						value: 'ClusterRole',
						label: '集群管理员'
					},
					{
						value: 'ClusterRoleBinding',
						label: '集群角色绑定'
					},
					{
						value: 'Role',
						label: '应用角色'
					},
					{
						value: 'RoleBinding',
						label: '应用角色绑定'
					}
				],
				templateText: '',
				deleteModal: false,
				deleteUid: '',
				btnShow: false,
				editId: ''
			}
		},
		methods: {
			// 创建应用
			creat () {
				if (this.selectValue[0] === '应用部署') {
					this.$api.post(0, '/kuber/v2/k8s/apps', {
						type: this.selectValue[1],
						yml: this.yml
					}, r => {
						if (r.data.code === 0) {
							this.$Message.success('创建成功')
							this.selectValue = []
							this.yml = ''
						} else {
							this.$Message.error('创建失败')
						}
					})
				}
				if (this.selectValue[0] === '角色') {
					this.$api.post(0, '/kuber/v2/k8s/apps/role', {
						type: this.selectValue[1],
						yml: this.yml
					}, r => {
						if (r.data.code === 0) {
							this.$Message.success('创建成功')
							this.selectValue = []
							this.yml = ''
						} else {
							this.$Message.error('创建失败')
						}
					})
				}
				if (this.selectValue[0] === '持久化存储') {
					this.$api.post(0, '/kuber/v2/k8s/stoarge', {
						type: this.selectValue[1],
						yml: this.yml
					}, r => {
						if (r.data.code === 0) {
							this.$Message.success('创建成功')
							this.selectValue = []
							this.yml = ''
						} else {
							this.$Message.error('创建失败')
						}
					})
				}
				if (this.selectValue[0] === '水平伸缩器') {
					this.$api.post(0, '/kuber/v2/k8s/autoscaling', {
						yml: this.yml
					}, r => {
						if (r.data.code === 0) {
							this.$Message.success('创建成功')
							this.selectValue = []
							this.yml = ''
						} else {
							this.$Message.error('创建失败')
						}
					})
				}
			},
			getList () {
				this.$api.get(0, '/kuber/v2/appTemplate/page?page=' + this.page + '&limit=' + this.pageSize, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						this.count = r.data.data.total
					}
				})
			},
			// 分页跳转
			handlePage (value) {
				this.page = value
				this.getList()
			},
			// 创建模板
			creatTemplate () {
				this.$api.post(0, '/kuber/v2/appTemplate', {
					appName: this.appName,
					appType: this.type,
					yamltext: this.templateText
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('创建成功')
						this.cancel()
						this.getList()
					} else {
						this.$Message.error('创建失败')
					}
				})
			},
			cancel () {
				this.appName = ''
				this.type = ''
				this.templateText = ''
				this.deleteUid = ''
				this.btnShow = false
				this.templateModal = false
			},
			// 删除模板
			deleteTemplate () {
				this.$api.delete(0, '/kuber/v2/appTemplate?id=' + this.deleteUid, {}, r => {
					if (r.data.code === 0) {
						this.$Message.success('删除成功')
						this.cancel()
						this.getList()
					} else {
						this.$Message.error('删除失败')
					}
				})
			},
			// 修改模板
			editTemplate () {
				this.$api.put(0, '/kuber/v2/appTemplate', {
					uuid: this.editId,
					appName: this.appName,
					appType: this.type,
					yamltext: this.templateText
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('修改成功')
						this.cancel()
						this.getList()
						this.$apithis.deleteModal = true
					} else {
						this.$Message.error('修改失败')
					}
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>
